<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题管理</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/vendors/iconly/bold.css">
    <link rel="stylesheet" href="/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/antd-layout.css">
    <script src="/js/common.js"></script>
    <script src="/js/vue.2.6.4.min.js"></script>
    <script src='/js/jquery.3.6.0.min.js'></script>
    <style>
        .editor—wrapper {border: 1px solid #ccc;z-index: 100;height: 200px;}
        .toolbar-container {border-bottom: 1px solid #ccc;}
        .editor-container {height: 110px;}
        .modal-dialog-scrollable .modal-content {overflow-y: auto;}
        @media (min-width: 1200px) {.modal-xl {max-width: 1500px;}}
        .element-table {background: #ffffff;border: 1px solid #ebeef5;border-radius: 0;overflow: hidden;margin: 0 -1.5rem;border-left: none;border-right: none;}
        .element-table table {width: 100%;border-collapse: collapse;}
        .element-table thead th {background: #f5f7fa;color: #909399;font-weight: 500;text-align: center;padding: 12px 10px;font-size: 14px;border-bottom: 1px solid #ebeef5;border-right: 1px solid #ebeef5;}
        .element-table thead th:last-child {border-right: none;}
        .element-table tbody td {padding: 12px 10px;border-bottom: 1px solid #ebeef5;border-right: 1px solid #ebeef5;color: #606266;font-size: 14px;text-align: center;}
        .element-table tbody td:last-child {border-right: none;}
        .element-table tbody tr {transition: background-color 0.25s ease;}
        .element-table tbody tr:hover {background: #f5f7fa;}
        .element-table tbody tr:nth-child(even) {background: #fafafa;}
        .element-table tbody tr:nth-child(even):hover {background: #f5f7fa;}
        .element-table tbody tr:last-child td {border-bottom: none;}
        .el-btn-text {display: inline-block;padding: 5px 15px;font-size: 14px;border-radius: 4px;cursor: pointer;transition: all 0.3s;text-decoration: none;margin-right: 8px;border: 1px solid;}
        .el-btn-text:last-child {margin-right: 0;}
        .el-btn-text:hover {text-decoration: none;}
        .el-btn-primary {color: #409eff;border-color: #c6e2ff;background: #ecf5ff;}
        .el-btn-primary:hover {color: #66b1ff;border-color: #409eff;background: #d9ecff;}
        .el-btn-success {color: #67c23a;border-color: #c2e7b0;background: #f0f9ff;}
        .el-btn-success:hover {color: #85ce61;border-color: #67c23a;background: #e1f3d8;}
        .action-buttons {display: flex;align-items: center;justify-content: center;}
    </style>
</head>
<body>
<div id="app">
    <div id="nav-bar-container"></div>

    <div id="main">
        <div class="page-heading">
            <section class="section">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">错题反馈</h5>
                            </div>
                            <div class="card-body">
                                <!-- Table with outer spacing -->
                                <div class="table-responsive element-table">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th style="width: 600px">内容</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="item in resList">
                                            <td>{{item.id}}</td>
                                            <td style="max-width: 500px">{{item.context}}</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a href="#" class="el-btn-text el-btn-primary" data-bs-toggle="modal"
                                                       data-bs-target="#inlineForm" @click="beginEdit(item)">编辑题目</a>
                                                    <a href="#" class="el-btn-text el-btn-success" @click="markFinish(item.id)">已处理</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination pagination-primary">
                                        <li class="page-item" @click="goBegin()">
                                            <a class="page-link">
                                                <span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
                                            </a>

                                        </li>
                                        <li :class="item == qry.current?'page-item active':'page-item'"
                                            v-for="item in pageNums" @click="changeNum(item)">
                                            <a class="page-link">
                                                {{item}}
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link">
                                                 <span aria-hidden="true" @click="goEnd()"><i
                                                         class="bi bi-chevron-right"></i></span>
                                            </a>

                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel33" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"
                 role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel33">编辑 </h4>
                        <button type="button" class="close" data-bs-dismiss="modal"
                                aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <orm action="#">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-2">
                                        题目:
                                    </div>
                                    <div class="col-10">
                                        <textarea name="a-editor" rows="5" class="form-control" v-model="bindModel.context"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        选项:
                                    </div>
                                    <div class="col-10">
                                        <textarea type="text" placeholder="选项" style="height: 110px"
                                                  class="form-control" v-model="bindModel.questionOptions">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        答案:
                                    </div>
                                    <div class="col-10">
                                         <textarea type="text" placeholder="答案"
                                                   class="form-control" v-model="bindModel.answer">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        备注:
                                    </div>
                                    <div class="col-10">
                                       <textarea type="text" placeholder="备注"
                                                 class="form-control" v-model="bindModel.remark">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        问题类型:
                                    </div>
                                    <div class="col-10">
                                        <select class="form-control" v-model="bindModel.questionType">
                                            <option value="1">单选</option>
                                            <option value="2">多选</option>
                                            <option value="3">简答</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        菜单ID:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="菜单ID"
                                               class="form-control" v-model="bindModel.menuId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        材料ID:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="材料ID"
                                               class="form-control" v-model="bindModel.materialsId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        分数:
                                    </div>
                                    <div class="col-10">
                                        <input type="text" placeholder="score"
                                               class="form-control" v-model="bindModel.score">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        examId:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="examId"
                                               class="form-control" v-model="bindModel.examId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        解析:
                                    </div>
                                    <div class="col-10">
                                        <textarea id="a-editor" name="a-editor"  rows="12" class="form-control" v-model="bindModel.analysis"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        难度:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder=""
                                               class="form-control" v-model="bindModel.hardScore">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        排序值:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="sortNum"
                                               class="form-control" v-model="bindModel.sortNum">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        标签:
                                    </div>
                                    <div class="col-10">
                                        <input type="text" placeholder="英文逗号分隔"
                                               class="form-control" v-model="bindModel.tagNames">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-secondary"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">关闭</span>
                            </button>
                            <button type="button" class="btn btn-primary ml-1"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="d-none d-sm-block" @click="submitItem()">提交</span>
                            </button>
                        </div>
                    </orm>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/nav-bar.js"></script>
<script src="/js/main.js"></script>
<link href="/css/w_editor.css" rel="stylesheet"/>
<script src="/js/w_editor.js"></script>
</body>

</html>
<script type="text/javascript">
    const {createEditor, createToolbar} = window.wangEditor;

    var q_editor;
    var a_editor;


    jQuery(document).ready(function () {
        var mainVue = new Vue({
            el: `#main`,
            data: {
                userInfo: {userName: '', token: '', imageHeadUrl: ''},
                bindModel: {
                    id: 0,
                    context: '',
                    examBankId: 0,
                    answer: '',
                    questionOptions: '',
                    materialsId: 0,
                    remark: '',
                    questionType: 1,
                    menuId: 0,
                    score: 0,
                    examId: 0,
                    analysis: '',
                    hardScore: 0,
                    sortNum: 0,
                    extraInfo: '',
                    tagNames: ''
                },
                resList: [],
                qry: {
                    current: 1,
                    pageSize: 20,
                    examBankId: 0,
                    examId: 0,
                    menuId: 0
                },
                examBankId: 0,
                pageNums: [1, 2, 3]
            },
            methods: {
                'init': function () {
                    var examBankId = localStorage.getItem("examBankId");
                    if (examBankId) {
                        this.qry.examBankId = examBankId;
                        this.examBankId = examBankId;
                    }
                    var thisVue = this;
                    var localUserInfo = localStorage.getItem("userInfo");
                    if (localUserInfo) {
                        thisVue.$set(thisVue, 'userInfo', JSON.parse(localUserInfo));
                    }
                    thisVue.qry.examId = getQueryString("examId");
                    thisVue.qry.menuId = getQueryString("menuId");
                    this.bindModel.examId = this.qry.examId;
                    this.getResList();
                },

                'beginEdit': function (item) {
                    var thisVue = this;
                    var questionId = item.questionId;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/question/getQuestion',
                        data: JSON.stringify({id: questionId}),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.bindModel = data.data;
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'markFinish': function (id) {
                    var thisVue = this;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/question/handleReportQuestion',
                        data: JSON.stringify({id: id}),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.getResList()
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'submitItem': function () {
                    var thisVue = this;
                    thisVue.bindModel.examBankId = thisVue.examBankId;
                    // thisVue.bindModel.context = q_editor.getHtml();
                    // thisVue.bindModel.analysis = a_editor.getHtml();

                    var url = '/question/addQuestion';
                    if (thisVue.bindModel.id > 0) {
                        url = '/question/updateQuestion';
                    }
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: url,
                        data: JSON.stringify(thisVue.bindModel),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.getResList();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'getResList': function () {
                    var thisVue = this;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/question/getReportQuestionList',
                        data: JSON.stringify(thisVue.qry),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.resList = data.data;
                            thisVue.qry.pageEnd = Math.ceil(data.total / thisVue.qry.pageSize);
                            thisVue.qry.total = data.total;
                            var indexBegin = (thisVue.qry.current - 1) * thisVue.qry.pageSize + 1;
                            for (var i = 0; i < thisVue.resList.length; i++) {
                                thisVue.resList[i].index = indexBegin + i;
                            }
                            thisVue.rebuildPage();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'rebuildPage': function () {
                    var pageNums = [];
                    var begin = this.qry.current - 3;
                    var end = this.qry.current + 3;
                    if (begin < 1) {
                        begin = 1;
                    }
                    if (end > this.qry.pageEnd) {
                        end = this.qry.pageEnd;
                    }
                    for (var i = begin; i <= end; i++) {
                        pageNums.push(i);
                    }
                    this.pageNums = pageNums;
                },
                'changeNum': function (item) {
                    this.qry.current = item;
                    this.getResList();
                },
                'goBegin': function () {
                    this.qry.current = this.qry.pageBegin;
                    this.getResList();
                },
                'goEnd': function () {
                    this.qry.current = this.qry.pageEnd;
                    this.getResList();
                },
                'formatDate': function (input) {
                    return formatDateFull(input);
                },
                'formateQuestionType': function (input) {
                    return formateQuestionType(input);
                },
                'handleContext': function (item) {
                    if (item == null) {
                        return "";
                    }
                    if (item.length > 100) {
                        return item.substring(0, 100) + "...";
                    }
                    return item;
                }
            }
        });
        mainVue.init();

    });
</script>
